<template>
  <view class="order-page">
    <!-- 顶部导航栏 -->
   <!-- <u-navbar 
      title="我的订单" 
      :border="false" 
      :title-bold="true"
      title-color="#1e293b"
      background="#ffffff"
      back-icon-color="#64748b"
      @clickLeft="navigateBack"
      nav-bar-height="44"
    >
      <view class="search-container" slot="right">
        <u-search 
          v-model="searchKey"
          placeholder="搜索订单号或商品" 
          :show-action="false" 
          :border="false"
          bg-color="#f1f5f9"
          placeholder-color="#94a3b8"
          color="#1e293b"
          @search="handleSearch"
          @clear="clearSearch"
          @focus="handleSearchFocus"
          @blur="handleSearchBlur"
          input-align="left"
        ></u-search>
      </view>
    </u-navbar> -->

    <!-- 订单类型Tab（带数量角标） -->
    <view class="tab-container">
      <u-tabs 
        :list="orderTypeTabs" 
        :current="activeTypeIndex" 
        @change="handleTypeChange"
        active-color="#3b82f6" 
        inactive-color="#64748b"
        bar-height="4rpx" 
        bar-width="80rpx"
        bar-color="#3b82f6"
        :bold="true"
        :border="false"
        :item-style="{padding: '22rpx 0', transition: 'all 0.3s'}"
        :scrollable="false"
        gutter="10rpx"
      >
        <template #item="props">
          <view class="tab-item">
            <text>{{ props.item.name }}</text>
            <view class="tab-badge" v-if="getTypeCount(props.item.value)">
              {{ getTypeCount(props.item.value) }}
            </view>
          </view>
        </template>
      </u-tabs>
    </view>

    <!-- 状态筛选栏 -->
    <view class="status-filter-container">
      <scroll-view 
        scroll-x 
        class="status-scroll"
        :scroll-with-animation="true"
        :scroll-left="scrollLeft"
        scroll-anchoring
        @scroll="onStatusScroll"
      >
        <view 
          class="status-item"
          v-for="(status, index) in statusFilters" 
          :key="index"
          :class="{ active: activeStatus === status.value }"
          @click="handleStatusChange(status.value, index)"
          :data-index="index"
        >
          {{ status.label }}
          <view class="status-indicator" v-if="activeStatus === status.value"></view>
          <view class="status-count" v-if="getStatusCount(status.value) > 0">
            {{ getStatusCount(status.value) }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-list-container"
      scroll-y
      :scroll-top="scrollTop"
      @scroll="handleScroll"
      @scrolltolower="loadMoreOrders"
      :enhanced="true"
      :show-scrollbar="false"
    >
      <!-- 筛选结果提示 -->
      <view class="filter-result-tip" v-if="showFilterTip">
        <text>已筛选出 {{ filteredOrders.length }} 条{{ getActiveTypeText() }}，{{ getActiveStatusText() }}</text>
        <u-icon 
          name="close-circle" 
          size="26" 
          color="#94a3b8" 
          @click="resetFilters"
          class="close-tip-icon"
        ></u-icon>
      </view>
      
      <!-- 订单类型标签 -->
      <view 
        class="order-type-badge" 
        v-if="activeType === 'goods'"
      >
        <u-icon name="shopping-cart" size="24" color="#3b82f6" class="badge-icon"></u-icon>
        <text class="badge-text">商品订单</text>
      </view>
      <view 
        class="order-type-badge" 
        v-if="activeType === 'course'"
      >
        <u-icon name="bookmark" size="24" color="#10b981" class="badge-icon"></u-icon>
        <text class="badge-text">课程订单</text>
      </view>
      
      <!-- 订单项 -->
      <view 
        class="order-card" 
        v-for="(order, index) in filteredOrders" 
        :key="order.orderSn"
        :style="{'--order-index': index}"
        @click="handleViewDetail(order)"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-sn">
            <u-icon name="file-text" size="24" color="#94a3b8"></u-icon>
            <text class="value">{{ order.orderSn }}</text>
          </view>
          <view 
            class="order-status" 
            :style="{ color: getStatusColor(order.status) }"
            :class="['status-tag', `status-${order.status}`]"
          >
            {{ getStatusText(order.status) }}
          </view>
        </view>
        
        <!-- 订单商品 -->
        <view class="order-product">
          <image 
            class="product-image" 
            :src="order.productImg" 
            mode="aspectFill"
            lazy-load
            :fade-show="true"
          ></image>
          <view class="product-info">
            <text class="product-name">{{ order.productName }}</text>
            <text class="product-spec" v-if="order.spec">{{ order.spec }}</text>
            <view class="product-meta">
              <text class="product-price">¥{{ order.price.toFixed(2) }}</text>
              <text class="product-quantity">x{{ order.quantity }}</text>
            </view>
          </view>
        </view>
        
        <!-- 订单信息 -->
        <view class="order-summary">
          <view class="order-time">
            <u-icon name="clock" size="24" color="#94a3b8"></u-icon>
            <text class="time-text">{{ order.createTime }}</text>
          </view>
          <view class="order-total">
            <text class="total-label">合计：</text>
            <text class="total-value">¥{{ (order.price * order.quantity).toFixed(2) }}</text>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="order-actions">
          <u-button 
            v-if="order.status === 'wait_pay'"
            size="mini"
            class="action-btn cancel-btn"
            @click.stop="handleCancelOrder(order)"
            shape="circle"
            plain
          >
            取消订单
          </u-button>
          <u-button 
            v-if="order.status === 'wait_pay'"
            size="mini"
            class="action-btn pay-btn"
            @click.stop="handlePayOrder(order)"
            shape="circle"
          >
            立即支付
          </u-button>
          <u-button 
            v-if="order.status === 'wait_deliver' || order.status === 'wait_receive'"
            size="mini"
            class="action-btn track-btn"
            @click.stop="handleTrackOrder(order)"
            shape="circle"
            plain
          >
            查看物流
          </u-button>
          <u-button 
            v-if="order.status === 'wait_receive'"
            size="mini"
            class="action-btn receive-btn"
            @click.stop="handleReceiveOrder(order)"
            shape="circle"
          >
            确认收货
          </u-button>
          <u-button 
            v-if="order.status === 'completed' && !order.isEvaluated"
            size="mini"
            class="action-btn evaluate-btn"
            @click.stop="handleEvaluateOrder(order)"
            shape="circle"
          >
            评价
          </u-button>
          <u-button 
            v-if="order.status === 'completed' && order.isEvaluated"
            size="mini"
            class="action-btn evaluated-btn"
            shape="circle"
            plain
          >
            已评价
          </u-button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredOrders.length === 0 && !loading">
        <u-icon 
          name="empty" 
          size="120" 
          color="#cbd5e1" 
          class="empty-icon"
        ></u-icon>
        <text class="empty-text">暂无符合条件的订单</text>
        <view class="empty-actions" v-if="hasActiveFilters">
          <u-button 
            class="empty-btn"
            size="mini"
            @click="resetFilters"
            shape="circle"
            plain
          >
            重置筛选条件
          </u-button>
          <u-button 
            class="empty-btn primary"
            size="mini"
            @click="navigateToHome"
            shape="circle"
          >
            去逛逛
          </u-button>
        </view>
      </view>
      
      <!-- 加载中（骨架屏） -->
      <view class="loading-state" v-if="loading && filteredOrders.length > 0">
        <u-skeleton 
          :rows="3" 
          :loading="true" 
          height="160rpx" 
          radius="16rpx"
          bg-color="#f1f5f9"
          active-color="#e2e8f0"
        ></u-skeleton>
      </view>
      
      <!-- 加载失败 -->
      <view class="error-state" v-if="loadError && filteredOrders.length > 0">
        <text class="error-text">加载失败，请重试</text>
        <u-button 
          class="retry-btn"
          size="mini"
          @click="retryLoad"
          shape="circle"
          plain
        >
          重试
        </u-button>
      </view>
      
      <!-- 已加载全部 -->
      <view class="end-state" v-if="!hasMore && filteredOrders.length > 0">
        <text class="end-text">— 已加载全部订单 —</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { debounce } from 'lodash'; // 需引入lodash或实现简易防抖

export default {
  data() {
    return {
      // 订单类型配置
      orderTypeTabs: [
        { name: '商品订单', value: 'goods' },
        { name: '课程订单', value: 'course' }
      ],
      activeType: 'goods',
      activeTypeIndex: 0,
      
      // 状态筛选配置
      statusFilters: [
        { label: '全部', value: '' },
        { label: '待付款', value: 'wait_pay' },
        { label: '待发货', value: 'wait_deliver' },
        { label: '待收货', value: 'wait_receive' },
        { label: '已完成', value: 'completed' },
        { label: '已取消', value: 'cancelled' }
      ],
      activeStatus: '',
      scrollLeft: 0,
      activeStatusIndex: 0,
      statusScrolling: false, // 状态筛选滚动中标记
      
      // 搜索
      searchKey: '',
      searchFocused: false,
      
      // 订单数据
      allOrders: {
        goods: [], // 商品订单
        course: []  // 课程订单
      },
      
      // 分页控制
      pageSize: 5,
      currentPage: 1,
      hasMore: true,
      loading: false,
      loadError: false,
      scrollTop: 0,
      
      // 状态映射
      statusConfig: {
        wait_pay: { text: '待付款', color: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
        wait_deliver: { text: '待发货', color: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
        wait_receive: { text: '待收货', color: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
        completed: { text: '已完成', color: '#6366f1', bg: 'rgba(99, 102, 241, 0.1)' },
        cancelled: { text: '已取消', color: '#94a3b8', bg: 'rgba(148, 163, 184, 0.1)' }
      }
    };
  },
  
  computed: {
    // 筛选后的订单
    filteredOrders() {
      // 获取当前类型的所有订单
      let orders = [...this.allOrders[this.activeType]];
      
      // 状态筛选
      if (this.activeStatus) {
        orders = orders.filter(order => order.status === this.activeStatus);
      }
      
      // 搜索筛选
      if (this.searchKey) {
        const keyword = this.searchKey.toLowerCase();
        orders = orders.filter(order => 
          order.orderSn.toLowerCase().includes(keyword) || 
          order.productName.toLowerCase().includes(keyword)
        );
      }
      
      // 分页处理
      return orders.slice(0, this.currentPage * this.pageSize);
    },
    
    // 是否显示筛选结果提示
    showFilterTip() {
      return (this.activeStatus || this.searchKey) && filteredOrders.length > 0;
    },
    
    // 是否有活跃的筛选条件
    hasActiveFilters() {
      return this.activeStatus || this.searchKey;
    }
  },
  
  onLoad() {
    // 初始化订单数据
    this.initOrderData();
    // 初始化防抖搜索
    this.debouncedSearch = debounce(this.handleSearch, 500);
  },
  
  onUnload() {
    // 清除防抖定时器
    this.debouncedSearch.cancel();
  },
  
  methods: {
    // 初始化订单数据
    initOrderData() {
      // 生成商品订单数据
      this.allOrders.goods = this.generateMockOrders('goods', 15);
      // 生成课程订单数据
      this.allOrders.course = this.generateMockOrders('course', 12);
      
      // 检查是否还有更多数据
      this.checkHasMore();
    },
    
    // 生成虚拟订单数据（增强版）
    generateMockOrders(type, count) {
      const orders = [];
      const statusTypes = ['wait_pay', 'wait_deliver', 'wait_receive', 'completed', 'cancelled'];
      const baseTime = new Date().getTime();
      
      // 商品订单数据
      const goodsData = [
        { name: 'DJI Mini 3 Pro 无人机', img: 'https://picsum.photos/seed/drone1/300/300', price: 4788 },
        { name: 'DJI Air 2S 无人机', img: 'https://picsum.photos/seed/drone2/300/300', price: 6499 },
        { name: 'DJI FPV 穿越机', img: 'https://picsum.photos/seed/drone3/300/300', price: 7999 },
        { name: '大疆 Ronin 4D 手持云台', img: 'https://picsum.photos/seed/drone4/300/300', price: 12999 },
        { name: 'DJI 智能飞行电池', img: 'https://picsum.photos/seed/drone5/300/300', price: 599 },
        { name: '大疆 无人机背包', img: 'https://picsum.photos/seed/drone6/300/300', price: 399 },
        { name: 'ND滤镜套装', img: 'https://picsum.photos/seed/drone7/300/300', price: 299 },
        { name: '无人机维修服务', img: 'https://picsum.photos/seed/drone8/300/300', price: 199 }
      ];
      
      // 课程订单数据
      const courseData = [
        { name: '无人机航拍入门到精通', img: 'https://picsum.photos/seed/course1/300/300', price: 299 },
        { name: 'FPV穿越机飞行课程', img: 'https://picsum.photos/seed/course2/300/300', price: 399 },
        { name: '无人机摄影大师课', img: 'https://picsum.photos/seed/course3/300/300', price: 499 },
        { name: '商业航拍接单指南', img: 'https://picsum.photos/seed/course4/300/300', price: 199 },
        { name: '无人机法律法规解读', img: 'https://picsum.photos/seed/course5/300/300', price: 99 },
        { name: '夜间航拍技巧课程', img: 'https://picsum.photos/seed/course6/300/300', price: 249 }
      ];
      
      for (let i = 0; i < count; i++) {
        // 随机选择商品/课程
        const dataSource = type === 'goods' ? goodsData : courseData;
        const randomItem = dataSource[Math.floor(Math.random() * dataSource.length)];
        
        // 随机状态
        const randomStatus = statusTypes[Math.floor(Math.random() * statusTypes.length)];
        
        // 随机时间（过去30天内）
        const randomDays = Math.floor(Math.random() * 30);
        const orderTime = new Date(baseTime - randomDays * 24 * 60 * 60 * 1000);
        
        // 生成订单号
        const orderSn = `ORD${type === 'goods' ? 'G' : 'C'}${orderTime.getFullYear()}${
          (orderTime.getMonth() + 1).toString().padStart(2, '0')
        }${orderTime.getDate().toString().padStart(2, '0')}${
          Math.floor(Math.random() * 10000).toString().padStart(4, '0')
        }`;
        
        // 随机数量
        const quantity = Math.floor(Math.random() * 3) + 1;
        
        // 生成规格信息（仅商品有）
        let spec = '';
        if (type === 'goods') {
          const specs = ['标准版', '畅飞套装', '进阶套装', '精英版', '专业版'];
          spec = specs[Math.floor(Math.random() * specs.length)];
        }
        
        orders.push({
          orderSn,
          status: randomStatus,
          productName: randomItem.name,
          productImg: randomItem.img,
          price: randomItem.price,
          quantity,
          spec,
          isEvaluated: randomStatus === 'completed' ? Math.random() > 0.5 : false, // 已完成订单随机标记是否评价
          createTime: `${orderTime.getFullYear()}-${
            (orderTime.getMonth() + 1).toString().padStart(2, '0')
          }-${orderTime.getDate().toString().padStart(2, '0')} ${
            orderTime.getHours().toString().padStart(2, '0')
          }:${orderTime.getMinutes().toString().padStart(2, '0')}`
        });
      }
      
      // 按时间降序排列
      return orders.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
    },
    
    // 加载更多订单
    loadMoreOrders() {
      if (this.loading || !this.hasMore || this.loadError) return;
      
      this.loading = true;
      this.loadError = false;
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 模拟10%概率加载失败
        if (Math.random() < 0.1) {
          this.loadError = true;
          this.loading = false;
          return;
        }
        
        this.currentPage++;
        this.checkHasMore();
        this.loading = false;
      }, 1000);
    },
    
    // 重试加载
    retryLoad() {
      this.loadError = false;
      this.loadMoreOrders();
    },
    
    // 检查是否还有更多数据
    checkHasMore() {
      const total = this.allOrders[this.activeType].filter(order => {
        // 应用状态筛选
        if (this.activeStatus && order.status !== this.activeStatus) return false;
        // 应用搜索筛选
        if (this.searchKey) {
          const keyword = this.searchKey.toLowerCase();
          if (!order.orderSn.toLowerCase().includes(keyword) && 
              !order.productName.toLowerCase().includes(keyword)) {
            return false;
          }
        }
        return true;
      }).length;
      
      this.hasMore = this.currentPage * this.pageSize < total;
    },
    
    // 处理订单类型切换
    handleTypeChange(index) {
      // 避免重复切换
	  console.log(index)
      if (this.activeTypeIndex === index.index) return;
      
      this.activeTypeIndex = index.index;
      this.activeType = this.orderTypeTabs[index.index].value;
      // 重置分页和筛选
      this.resetPagination();
      
      // 滚动到顶部（带动画）
      this.scrollTop = 0;
    },
    
    // 处理状态筛选切换
    handleStatusChange(status, index) {
      // 避免重复点击
      if (this.activeStatus === status && !this.statusScrolling) return;
      
      this.activeStatus = status;
      this.activeStatusIndex = index;
      // 重置分页
      this.resetPagination();
      
      // 计算滚动位置，使当前选中项居中（避免滚动中重复触发）
      this.statusScrolling = true;
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(`.status-item[data-index="${index}"]`).boundingClientRect();
        query.select('.status-scroll').boundingClientRect();
        query.exec(res => {
          if (res[0] && res[1]) {
            const itemLeft = res[0].left;
            const scrollWidth = res[1].width;
            const itemWidth = res[0].width;
            this.scrollLeft = itemLeft - scrollWidth / 2 + itemWidth / 2;
          }
          this.statusScrolling = false;
        });
      });
    },
    
    // 状态筛选滚动事件
    onStatusScroll() {
      this.statusScrolling = true;
      // 滚动结束后重置标记（延迟判断）
      clearTimeout(this.scrollEndTimer);
      this.scrollEndTimer = setTimeout(() => {
        this.statusScrolling = false;
      }, 300);
    },
    
    // 处理列表滚动
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    
    // 处理搜索（带防抖）
    handleSearchInput() {
      this.debouncedSearch();
    },
    
    // 搜索处理
    handleSearch() {
      this.resetPagination();
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKey = '';
      this.resetPagination();
    },
    
    // 搜索框聚焦
    handleSearchFocus() {
      this.searchFocused = true;
    },
    
    // 搜索框失焦
    handleSearchBlur() {
      this.searchFocused = false;
    },
    
    // 重置分页
    resetPagination() {
      this.currentPage = 1;
      this.checkHasMore();
      this.scrollTop = 0;
    },
    
    // 重置筛选条件
    resetFilters() {
      this.activeStatus = '';
      this.searchKey = '';
      this.resetPagination();
    },
    
    // 获取状态文本
    getStatusText(status) {
      return this.statusConfig[status]?.text || '未知状态';
    },
    
    // 获取状态颜色
    getStatusColor(status) {
      return this.statusConfig[status]?.color || '#94a3b8';
    },
    
    // 获取状态背景色
    getStatusBg(status) {
      return this.statusConfig[status]?.bg || 'rgba(148, 163, 184, 0.1)';
    },
    
    // 获取类型文本
    getActiveTypeText() {
      const typeItem = this.orderTypeTabs.find(item => item.value === this.activeType);
      return typeItem?.name || '订单';
    },
    
    // 获取活跃状态文本
    getActiveStatusText() {
      if (!this.activeStatus) return '显示全部状态';
      const statusItem = this.statusFilters.find(item => item.value === this.activeStatus);
      return `状态：${statusItem?.label}`;
    },
    
    // 获取类型订单数量
    getTypeCount(type) {
      return this.allOrders[type]?.length || 0;
    },
    
    // 获取状态订单数量
    getStatusCount(status) {
      if (!status) {
        return this.allOrders[this.activeType]?.length || 0;
      }
      return this.allOrders[this.activeType].filter(order => order.status === status).length;
    },
    
    // 处理取消订单
    handleCancelOrder(order) {
      uni.showModal({
        title: '取消订单',
        content: `确定要取消订单 ${order.orderSn} 吗？`,
        confirmText: '确认取消',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            // 模拟取消订单（添加加载状态）
            this.$set(order, 'status', 'cancelled');
            uni.showToast({
              title: '订单已取消',
              icon: 'none',
              duration: 2000
            });
            // 重新计算数量
            this.checkHasMore();
          }
        }
      });
    },
    
    // 处理支付订单
    handlePayOrder(order) {
      const totalAmount = (order.price * order.quantity).toFixed(2);
      uni.showModal({
        title: '确认支付',
        content: `订单 ${order.orderSn} 需支付 ¥${totalAmount}`,
        confirmText: '立即支付',
        cancelText: '稍后支付',
        success: (res) => {
          if (res.confirm) {
            // 模拟支付过程
            uni.showLoading({ title: '支付中...' });
            setTimeout(() => {
              uni.hideLoading();
              // 模拟支付成功
              this.$set(order, 'status', 'wait_deliver');
              uni.showToast({
                title: '支付成功',
                icon: 'success',
                duration: 2000
              });
              // 重新计算数量
              this.checkHasMore();
            }, 1500);
          }
        }
      });
    },
    
    // 处理查看物流
    handleTrackOrder(order) {
      uni.navigateTo({
        url: `/pages/order/track?orderSn=${order.orderSn}`
      });
    },
    
    // 处理确认收货
    handleReceiveOrder(order) {
      uni.showModal({
        title: '确认收货',
        content: `确定已收到订单 ${order.orderSn} 的商品吗？`,
        confirmText: '确认收到',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 模拟确认收货
            this.$set(order, 'status', 'completed');
            uni.showToast({
              title: '已确认收货',
              icon: 'success',
              duration: 2000
            });
            // 重新计算数量
            this.checkHasMore();
          }
        }
      });
    },
    
    // 处理评价订单
    handleEvaluateOrder(order) {
      uni.navigateTo({
        url: `/pages/order/evaluate?orderSn=${order.orderSn}`
      }).then(() => {
        // 模拟评价后状态更新（实际应在评价页回调中处理）
        setTimeout(() => {
          this.$set(order, 'isEvaluated', true);
        }, 1000);
      });
    },
    
    // 查看订单详情
    handleViewDetail(order) {
      uni.navigateTo({
        url: `/pages/order/detail?orderSn=${order.orderSn}&type=${this.activeType}`
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 前往首页
    navigateToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 基础变量 */
$color-primary: #3b82f6;
$color-success: #10b981;
$color-warning: #f59e0b;
$color-info: #6366f1;
$color-gray: #94a3b8;
$color-light-gray: #f1f5f9;
$color-text: #1e293b;
$color-text-secondary: #64748b;
$color-danger: #ef4444;

$spacing-xs: 10rpx;
$spacing-sm: 20rpx;
$spacing-md: 30rpx;
$spacing-lg: 40rpx;

$radius-sm: 8rpx;
$radius-md: 16rpx;
$radius-lg: 30rpx;

/* 页面整体样式 */
.order-page {
  background-color: #f8fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 搜索容器 */
.search-container {
  width: 280rpx;
  padding-right: $spacing-xs;
  
  .u-search {
    height: 60rpx !important;
    
    &:focus {
      background-color: #e2e8f0;
    }
  }
}

/* Tab栏容器 */
.tab-container {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

/* Tab项样式 */
.tab-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

/* Tab数量角标 */
.tab-badge {
  position: relative;
  min-width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  border-radius: 18rpx;
  background-color: $color-danger;
  color: #ffffff;
  font-size: 22rpx;
  font-weight: normal;
}

/* 状态筛选容器 */
.status-filter-container {
  background-color: #ffffff;
  padding: $spacing-xs 0;
  position: sticky;
  top: 90rpx;
  z-index: 10;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.status-scroll {
  white-space: nowrap;
  padding: 0 $spacing-md;
}

.status-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx $spacing-md;
  margin: 0 4rpx;
  font-size: 28rpx;
  color: $color-text-secondary;
  position: relative;
  border-radius: $radius-lg;
  transition: all 0.2s ease;
  gap: 8rpx;
  
  &.active {
    color: $color-primary;
    font-weight: 500;
    background-color: rgba(59, 130, 246, 0.1);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

/* 状态数量 */
.status-count {
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  background-color: $color-light-gray;
  color: $color-text-secondary;
  font-size: 20rpx;
}

.status-indicator {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background-color: $color-primary;
  position: absolute;
  bottom: 8rpx;
}

/* 筛选结果提示 */
.filter-result-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-sm $spacing-md;
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: $radius-md;
  margin: $spacing-sm 0;
  font-size: 26rpx;
  color: $color-text-secondary;
}

.close-tip-icon {
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.8);
  }
}

/* 订单列表容器 */
.order-list-container {
  flex: 1;
  padding: $spacing-sm $spacing-md;
  box-sizing: border-box;
}

/* 订单类型标签 */
.order-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 8rpx $spacing-sm;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: $radius-lg;
  margin-bottom: $spacing-sm;
  font-size: 24rpx;
  color: $color-primary;
  font-weight: 500;
}

.order-type-badge:nth-child(2) {
  background-color: rgba(16, 185, 129, 0.1);
  color: $color-success;
}

.badge-icon {
  margin-right: 8rpx;
}

/* 订单卡片 */
.order-card {
  background-color: #ffffff;
  border-radius: $radius-md;
  padding: $spacing-md;
  margin-bottom: $spacing-sm;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out;
  animation-delay: calc(var(--order-index) * 0.05s);
  animation-fill-mode: both;
  
  &:hover {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
    transform: translateY(-2rpx);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 订单头部 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-md;
  padding-bottom: $spacing-sm;
  border-bottom: 1rpx solid $color-light-gray;
}

.order-sn {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: $color-gray;
  
  .u-icon {
    margin-right: 8rpx;
  }
}

.order-status {
  font-size: 28rpx;
  font-weight: 500;
  padding: 6rpx 16rpx;
  border-radius: $radius-lg;
}

/* 状态标签样式 */
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-wait_pay {
  background-color: v-bind('getStatusBg("wait_pay")');
}

.status-wait_deliver {
  background-color: v-bind('getStatusBg("wait_deliver")');
}

.status-wait_receive {
  background-color: v-bind('getStatusBg("wait_receive")');
}

.status-completed {
  background-color: v-bind('getStatusBg("completed")');
}

.status-cancelled {
  background-color: v-bind('getStatusBg("cancelled")');
}

/* 订单商品 */
.order-product {
  display: flex;
  margin-bottom: $spacing-md;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: $radius-sm;
  object-fit: cover;
  margin-right: $spacing-sm;
  flex-shrink: 0;
  background-color: $color-light-gray;
  transition: transform 0.3s ease;
  
  .order-card:hover & {
    transform: scale(1.03);
  }
}

.product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 30rpx;
  color: $color-text;
  font-weight: 500;
  margin-bottom: $spacing-xs;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.product-spec {
  font-size: 24rpx;
  color: $color-text-secondary;
  margin-bottom: $spacing-xs;
  display: block;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 32rpx;
  color: $color-danger;
  font-weight: 600;
}

.product-quantity {
  font-size: 26rpx;
  color: $color-gray;
}

/* 订单摘要 */
.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-sm 0;
  border-top: 1rpx dashed $color-light-gray;
  border-bottom: 1rpx dashed $color-light-gray;
  margin-bottom: $spacing-md;
}

.order-time {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: $color-gray;
  
  .u-icon {
    margin-right: 8rpx;
  }
}

.order-total {
  font-size: 28rpx;
}

.total-label {
  color: $color-text-secondary;
  margin-right: 5rpx;
}

.total-value {
  color: $color-text;
  font-weight: 600;
}

/* 订单操作 */
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: $spacing-xs;
  flex-wrap: wrap;
}

.action-btn {
  padding: 12rpx 30rpx;
  border-radius: $radius-lg;
  font-size: 26rpx;
  height: auto;
  line-height: 1.4;
  min-width: 120rpx;
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.cancel-btn {
  background-color: transparent;
  color: $color-text-secondary;
  border: 1rpx solid #e2e8f0;
  
  &:active {
    background-color: #f1f5f9;
  }
}

.pay-btn {
  background-color: $color-primary;
  color: #ffffff;
  
  &:active {
    background-color: #2563eb;
  }
}

.track-btn {
  background-color: transparent;
  color: $color-primary;
  border: 1rpx solid #dbeafe;
  
  &:active {
    background-color: #eff6ff;
  }
}

.receive-btn {
  background-color: $color-success;
  color: #ffffff;
  
  &:active {
    background-color: #059669;
  }
}

.evaluate-btn {
  background-color: $color-warning;
  color: #ffffff;
  
  &:active {
    background-color: #d97706;
  }
}

.evaluated-btn {
  background-color: transparent;
  color: $color-gray;
  border: 1rpx solid #e2e8f0;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg 0;
  text-align: center;
  margin-top: $spacing-lg;
}

.empty-icon {
  margin-bottom: $spacing-md;
  opacity: 0.7;
}

.empty-text {
  font-size: 28rpx;
  color: $color-gray;
  margin-bottom: $spacing-md;
  line-height: 1.6;
}

.empty-actions {
  display: flex;
  gap: $spacing-sm;
  margin-top: $spacing-xs;
}

.empty-btn {
  padding: 0 40rpx;
  height: 70rpx;
  line-height: 70rpx;
  
  &.primary {
    background-color: $color-primary;
    color: #ffffff;
  }
}

/* 加载状态（骨架屏） */
.loading-state {
  padding: $spacing-md 0;
}

/* 加载失败 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-md 0;
  color: $color-gray;
}

.error-text {
  font-size: 26rpx;
  margin-bottom: $spacing-sm;
}

.retry-btn {
  color: $color-primary;
  border-color: $color-primary;
}

/* 已加载全部 */
.end-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-md 0;
  color: $color-gray;
  font-size: 26rpx;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .search-container {
    width: 240rpx;
  }
  
  .status-item {
    padding: 10rpx $spacing-xs;
    font-size: 26rpx;
  }
  
  .action-btn {
    padding: 10rpx 20rpx;
    font-size: 24rpx;
    min-width: 100rpx;
  }
}
</style>